<template>
	<view class="">
		<view class="search">
			<u-search inputAlign="center" placeholder="请输入关键字搜索" :clearabled="true"
			search-icon-color="#111111" @search="search()" v-model="Name" height="30" @custom="celSearch" :show-action="false"></u-search>
		</view>
		<view class="cont">
			<view class="cont_box" v-for="(l,i) in shop_list" :key="i" @tap="goProduct(l.ID)">
				<image :src="l.Images" mode=""></image>
				<view class="cont_name">
					{{l.ProductName}}
				</view>
				<view class="cont_btm">
					<view class="cont_price">
						<block v-if="l.PV>0">
							积分<text>{{l.PV}}</text>
						</block>
						<block v-else>
							￥<text>{{l.Price}}</text>
						</block>
					</view>
					<view class="cont_cart">
						兑换
					</view>
				</view>
			</view>
		</view> 
	</view>
</template>

<script>
	export default {
		data(){
			return{
				Name:'',
				shop_list:[]
			}
		},
		onLoad() {
			this.get_shop()
		},
		methods:{
			celSearch() {
				this.showSearch = false;
				this.Name = "";
				this.search();
			},
			async get_shop(){
				let res = await this.$api.post('/Products/PageList',{
					PageIndex:1,
					PageSize:10
				})
				console.log('所有商品 ',res);
				this.shop_list= res.data
			},
			goProduct(id) {
				uni.navigateTo({
					url: `/pages/dynamic/Product_Details?id=${id}`
				});
			},
		}
	}
	
</script>

<style lang="scss">
	.search{
		margin: 32rpx;
	}
	.cont{
		display: flex;
		flex-wrap: wrap;
		padding-left: 30rpx;
		.cont_box{
			height: 460rpx;
			width: 328rpx;
			background-color: #FFFFFF;
			border-radius:16rpx;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
			image{
				height: 292rpx;
				width: 328rpx;
				border-radius:16rpx 16rpx 0 0;
			}
			.cont_name{
				color: #10100F;
				font-size: 24rpx;
				height: 64rpx;
				width: 288rpx;
				margin: 20rpx 10rpx 0 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.cont_btm{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 10rpx 20rpx 0 20rpx;
				.cont_price{
					font-size: 22rpx;
					color: #4C310C;
					text{
						color: #ff557f;
						font-weight: bold;
						font-size: 28rpx;
						font-family: PingFang-SC-Bold;
						white-space: nowrap;
					}
				}
				.cont_cart{
					width: 102rpx;
					height: 52rpx;
					background-image: linear-gradient(#0C0C0C,#494438);
					box-shadow: 0rpx 6rpx 8rpx 0rpx #000000 30%;
					color: #F9DDAF;
					font-size: 24rpx;
					border-radius: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
	
</style>